<!DOCTYPE html>
<html>
<head>
    <title></title>
		<!--<#include "/header.html">-->
    <!--<#include "/header.html">-->
    <!--<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">-->
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/all.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/OverlayScrollbars.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../../statics/plugins/layui2.5.6/css/layui.css">
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
    <script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
    <script src="${request.contextPath}/statics/libs/vue.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${request.contextPath}/statics/js/common.js"></script>
    <script src="../../statics/plugins/layui2.5.6/layui.js"></script>
    <script src="../../statics/js/indexs/echarts-all.js"></script>
    <style>
    </style>
</head>
<body>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-info">
                    <div class="inner" style="text-align: center;">
                        <h3 style="font-size: 1.8rem ">昨日销售额：<span id="yesterday"></span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="southYesterday">-</span></h4>
                        <h4 style="display: inline-block;width: 49%;" >北区：<span id="northYesterday">-</span></h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-cash" style="font-size: 50px"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3 style="font-size: 1.8rem ">今日销售额：<span id="today">-</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;" >南区：<span id="southToday">-</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="northToday">-</span></h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-cash" style="font-size: 50px"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3 style="font-size: 1.8rem ">本月销售额：<span id="month">-</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="southMonth">-</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="northMonth">-</span></h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-cash" style="font-size: 50px"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-danger">
                    <div class="inner" style="text-align: center;">
                        <h3 style="font-size: 1.8rem ">今日客单价：<span id="kdj">-</span></h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="southKdj">-</span></h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="northKdj">-</span></h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-cash " style="font-size: 50px"></i>
                    </div>
                </div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
        <div class="row" style="height: 50px;">
            <div class="card-tools">
                <button type="button" class="btn btn-primary" onclick="chart(0)">近七天</button>
                <button type="button" class="btn btn-primary" onclick="chart(1)">近三十天</button>
                自定义时间:
                <button type="button" class="btn btn-success" style="padding: 0;border: none;background-color:none ;"><input id="beginTime" type="text"placeholder="开始时间"/></button>
                ——<button type="button" class="btn btn-success" style="padding: 0;border: none;background-color: none;"><input id="endTime" type="text"placeholder="结束时间"/></button>
                <button type="button" class="btn btn-success" onclick="chart(2)">查询</button>

            </div>
        </div>

        <div class="row" style="height: 400px;">
            <div class="col-md-12" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">销售额趋势</h4>
                        <div class="card-tools">
                            <button type="button" class="btn  btn-success" onclick="upload()">
                                数据导出
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;">

                        <div class="col-md-12" style="height: 100%;" id="orderChart">


                        </div>
                            <!-- /.col -->
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <div class="row" style="height: 400px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">单品销售量排名</h4>
                    </div>
                    <div class="card-body"style="height: 80%;" id="xslTop10">
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">单品销售额排名</h4>
                    </div>
                    <div class="card-body"style="height: 80%;" id="xseTop10">

                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height: 400px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">南区销售组成</h4>
                    </div>
                    <div class="card-body"style="height: 80%;" id="southShop">
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">北区销售组成</h4>
                    </div>
                    <div class="card-body"style="height: 80%;" id="northShop">

                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 5px;">
            <div class="col-md-12" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">商户销售统计</h4>
                    </div>
                    <div class="layui-card-body" style="height: 90%">
                        <div class="layui-form" style="height: 100%">
                            <table class="layui-table">

                                <thead>
                                <tr id="shop">

                                </tr>
                                <tr id="second">

                                </tr>

                                </thead>
                                <tbody id="detail">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

    </div>
</section>

<script>

    var zyType=null;
    var zyStartTime=null;
    var zyEndTime=null;

    var chartType=0;
    $(function () {
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#beginTime'
                ,type: 'date'
            });
            laydate.render({
                elem: '#endTime'
                ,type: 'date'
            });
        });

        orderCount();
        chart(0);
        shopChart(0);
        shopSaleCount();
    });

    function chart(type) {
        if(type == 0){
            zyType =7;
        }else if(type == 1){
            zyType =30;
        }else if(type == 2){
            zyStartTime =$("#beginTime").val();
            zyEndTime =$("#endTime").val();
        }
        chartType=type;
        orderChart(type);
        xslTop10(type);
        xseTop10(type);
        shopChart(type);
        shopSaleCount();
    }
function  shopSaleCount() {
        //呵呵
    $.ajax({
        type: "POST",
        url: baseURL + "jxc/jxcsaleorder/shopSaleCount",
        data: {type:zyType,startTime:zyStartTime,endTime:zyEndTime},
        success: function(r){
            var list=r.list;
            var time=list[1];
            var orderlist=list[0];
            var shopNamelist=list[2];

            //console.log(time);
            //console.log(orderlist);
            $("#shop").empty();
            $("#second").empty();
            $("#detail").empty()
            var info=" <td style='width: 80px' rowspan='2'></td>";
            var info1="";
            var info2="";

            for (var i = 0; i <shopNamelist.length ; i++) {
                info+="<td style='text-align: center;' colspan='2'>"+shopNamelist[i]+"</td>";
                info1+="<td style='text-align: center;'>单数</td><td style='text-align: center;width: 80px'>销售额</td>";
            }
            for(var i = 0; i <time.length ; i++){
                info2 +="<tr><td>"+time[i]+"</td>"
                for (var j = 0; j <shopNamelist.length  ; j++) {
                    var size=0;
                    var count=0;
                    for (var k = 0; k <orderlist.length ; k++) {
                        if(orderlist[k].name == time[i] && orderlist[k].shopName==shopNamelist[j]){
                            size ++;
                            count +=orderlist[k].totalAmount;
                        }
                    }
                    info2 +="<td >"+size+"</td><td>"+count.toFixed(2)+"</td>";
                }
                info2 +="</tr>"
            }
            $("#shop").html(info);
            $("#second").html(info1);
            $("#detail").html(info2);

        }
    })
}
function orderCount(){
    $.get(baseURL + "jxc/jxcsaleorder/orderCount", function(r){
        $('#today').text((r.southToday+r.northToday).toFixed(1)+"元");
        $('#southToday').text(r.southToday+"元");
        $('#northToday').text(r.northToday+"元");

        $('#yesterday').text((r.southYesterday+r.northYesterday).toFixed(1)+"元");
        $('#southYesterday').text(r.southYesterday+"元");
        $('#northYesterday').text(r.northYesterday+"元");

        $('#month').text((r.southMonth+r.northMonth).toFixed(1)+"元");
        $('#southMonth').text(r.southMonth+"元");
        $('#northMonth').text(r.northMonth+"元");

        if(!r.southKdj){

        }
        $('#kdj').text(((r.southKdj+r.northKdj)/2).toFixed(1)+"元");
        $('#southKdj').text(r.southKdj.toFixed(2)+"元");
        $('#northKdj').text(r.northKdj.toFixed(2)+"元");

    });
}
function orderChart(type) {
    var startTime=$("#beginTime").val()
    var endTime=$("#endTime").val();
    if(type==2){
        if(!startTime){
            alert("请选择开始时间！")
            return;
        }
        if(!endTime){
            alert("请选择结束时间！")
            return;
        }
    }
    $.ajax({
        type: "POST",
        url: baseURL + "jxc/jxcsaleorder/orderChart",
        data: {type:type,startTime:startTime,endTime:endTime},
        success: function(r){
            var myChart = echarts.init(document.getElementById('orderChart'));
            var option = {
                tooltip : {
                    trigger: 'axis',
                    formatter: function(params) { //自定义函数修改折线图给数据加单位
                        var str = '';//声明一个变量用来存储数据
                        str += '<div>'+ params[0].name +'</div>'; //显示首行的函数
                        for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                            str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'+ params[i].seriesName +'</span> : <span>'+ params[i].data+'元' +'</br>';
                        }
                        return str;
                    }
                },
                grid: {
                    x: 46,
                    y:30,
                    x2:32,
                    y2:30,
                    borderWidth: 0
                },
                legend: {
                    data:['南区','北区'],
                    textStyle:{
                       // color:"#e9ebee"
                    },
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        name:'日期',
                        boundaryGap : false,
                        data : r.southList[0],
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab'
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'销售额',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab'
                            }
                        }

                    }
                ],
                series : [
                    {
                        name:'南区',
                        type:'line',
                        data:r.southList[1],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color:"#e15828"
                            }
                        }
                    },
                    {
                        name:'北区',
                        type:'line',
                        //stack: '车次',
                        smooth: true,
                        data:r.northList[1],
                        itemStyle: {
                            normal: {
                                color:"#2e7cff"
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    });
}

function xslTop10(type) {
    var startTime=$("#beginTime").val()
    var endTime=$("#endTime").val();
    if(type==2){
        if(!startTime){
            alert("请选择开始时间！")
            return;
        }
        if(!endTime){
            alert("请选择结束时间！")
            return;
        }
    }
    $.ajax({
        type: "POST",
        url: baseURL + "jxc/jxcselldetails/xslTop10",
        data: {type:type,startTime:startTime,endTime:endTime},
        success: function(r){
            var myChart = echarts.init($("#xslTop10")[0]);
            var option = {
                tooltip : {
                    trigger: 'axis',
                    formatter: function(params) { //自定义函数修改折线图给数据加单位
                        var str = '';//声明一个变量用来存储数据
                        str += '<div>'+ params[0].name +'</div>'; //显示首行的函数
                        for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                            str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'+ params[i].seriesName +'</span> : <span>'+ params[i].data+'份' +'</br>';
                        }
                        return str;
                    },
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    x: 90,
                    y:30,
                    /*x2:32,
                    y2:40,*/
                    borderWidth: 0
                },
                xAxis:  {
                    type: 'value',
                    name:'销量/份',
                    x:'180',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a4a7ab'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    name:'商品名',
                    data: r.chartList[0],
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a4a7ab'
                        }
                    }
                },
                series: [
                    {
                        name: '销售量',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: r.chartList[1],
                        itemStyle: {
                            normal: {
                                color:"#ff7d0a"
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    });
}

function xseTop10(type) {
    var startTime=$("#beginTime").val()
    var endTime=$("#endTime").val();
    if(type==2){
        if(!startTime){
            alert("请选择开始时间！")
            return;
        }
        if(!endTime){
            alert("请选择结束时间！")
            return;
        }
    }
    $.ajax({
        type: "POST",
        url: baseURL + "jxc/jxcselldetails/xseTop10",
        data: {type:type,startTime:startTime,endTime:endTime},
        success: function(r){
            var myChart = echarts.init($("#xseTop10")[0]);
            var option = {
                tooltip : {
                    trigger: 'axis',
                    formatter: function(params) { //自定义函数修改折线图给数据加单位
                        var str = '';//声明一个变量用来存储数据
                        str += '<div>'+ params[0].name +'</div>'; //显示首行的函数
                        for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                            str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'+ params[i].seriesName +'</span> : <span>'+ params[i].data+'份' +'</br>';
                        }
                        return str;
                    },
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    x: 90,
                    y:30,
                    /*x2:32,
                    y2:40,*/
                    borderWidth: 0
                },
                xAxis:  {
                    type: 'value',
                    name:'销售额/元',
                    x:'180',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a4a7ab'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    name:'商品名',
                    data: r.chartList[0],
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a4a7ab'
                        }
                    }
                },
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: r.chartList[1],
                        itemStyle: {
                            normal: {
                                color:"#ff7d0a"
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    });
}
function shopChart(type) {
    var startTime=$("#beginTime").val()
    var endTime=$("#endTime").val();
    if(type==2){
        if(!startTime){
            alert("请选择开始时间！")
            return;
        }
        if(!endTime){
            alert("请选择结束时间！")
            return;
        }
    }
    $.ajax({
        type: "POST",
        url: baseURL + "jxc/jxcsaleorder/shopChart",
        data: {type:type,startTime:startTime,endTime:endTime},
        success: function(r){
            var southValue=[];
            for (let i = 0; i < r.southList.length; i++) {
                southValue.push({
                    value: r.southList[i].totalAmount, name: r.southList[i].shopName, itemStyle: {
                        /* normal: {
                             color: clor[i]
                         }*/
                    }
                });
            }
            var myChart = echarts.init($("#southShop")[0]);
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a}<br/>{b}:{c}"+"元"+"({d}%)",
                    position:[130,230]
                },
                title: {
                    text: '南区',
                    textStyle: {
                        color: "#e9ebee"

                    },
                    x: 'center'

                },
                calculable: false,
                series: [
                    {
                        name: '销售额',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: southValue
                    }
                ]
            };
            myChart.setOption(option);

            var northValue=[];
            for (let i = 0; i < r.northList.length; i++) {
                northValue.push({
                    value: r.northList[i].totalAmount, name: r.northList[i].shopName, itemStyle: {
                        /* normal: {
                             color: clor[i]
                         }*/
                    }
                });
            }
            var myChart1 = echarts.init($("#northShop")[0]);
            option1 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a}<br/>{b}:{c}"+"元"+"({d}%)",
                    position:[130,230]
                },
                title: {
                    text: '北区',
                    textStyle: {
                        color: "#e9ebee"

                    },
                    x: 'center'

                },
                calculable: false,
                series: [
                    {
                        name: '销售额',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: northValue
                    }
                ]
            };
            myChart1.setOption(option1);
        }
    });
}



function sailExp(){
    window.location.href =  baseURL + "cll/cllvehiclerecord/exportcll?type="+zyType+"&startTime="+zyStartTime+"&endTime="+zyEndTime;
   /* var startTime=$("#beginTime").val();
    var endTime = $("#endTime").val();
    window.location.href =  baseURL + "jxc/jxcsaleorder/exportSale?type="+chartType+"&startTime="+startTime+"&endTime"+endTime;*/
}
function upload(){
    window.location.href =  baseURL + "jxc/jxcsaleorder/upload?type="+zyType+"&startTime="+zyStartTime+"&endTime="+zyEndTime;
}

</script>
</body>
</html>